<template>
  <div id="print">
    <div id="qrCode" ref="qrCodeDiv" style="position: absolute;top:0;float: right;right: 0" />
    <div style="text-align: center;padding: 30px 0 40px 0;font-size: 30px;font-weight: bold;">{{ sysConfigInfo.enterpriseFullName }}生产表</div>
    <div style="font-weight: bold;padding-bottom: 1px;padding-top: 5px">
      <span style="font-size: 14px;">打印时间: {{ printTime }}</span>
      <span style="font-size: 12px;float: right">请连接厂内WIFI扫码</span>
    </div>
    <table v-loading="tableLoading" style="border-collapse: collapse;width: 100%;text-align:left;table-layout:fixed;word-break:break-all">
      <thead style="text-align: center;font-size: 14px;height: 50px;line-height: 50px;display:table-header-group;">
        <tr>
          <th width="80">序号</th>
          <th width="80">客户名称</th>
          <th width="80">模具</th>
          <th width="160">属性</th>
          <th width="60">余数</th>
          <th width="140">备注</th>
          <th width="60">产量</th>
        </tr>
      </thead>
      <tbody style="font-size: 13px;color:#333333;text-align: center;">
        <tr v-for="(item,index) in tableData" :key="index" style="height: 60px">
          <td>{{ item.produceNo }}</td>
          <td>
            <div>{{ item.customerName }}</div>
          </td>
          <td>{{ item.productInfo.moldName }}</td>
          <td>
            {{ item.productInfo.color }}*{{ item.productInfo.material }}*{{ item.productInfo.size }}*{{ item.productInfo.length }}
          </td>
          <td>{{ item.remainingQuantity }}</td>
          <td>{{ item.remark }}</td>
          <td />
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { selectProduceRegistrationList } from '@/api/erp/produce'
import Moment from 'moment/moment'
import QRCode from 'qrcodejs2'
import { selectConfig } from '@/api/system/config'

export default {
  name: 'RegistrationPrintModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      sysConfigInfo: {},
      tableLoading: false,
      tableData: [],
      printTime: Moment(new Date()).format('YYYY-MM-DD HH:mm')
    }
  },
  mounted() {
    this.init(this.$route.query)
    this.getSysConfigInfo()
    new QRCode(this.$refs.qrCodeDiv, {
      text: this.$store.getters.qrCodeUrl,
      width: 100,
      height: 100,
      colorDark: '#333333', // 二维码颜色
      colorLight: '#ffffff', // 二维码背景色
      correctLevel: QRCode.CorrectLevel.H// 容错率，L/M/H
    })
  },
  methods: {
    init(query) {
      this.tableLoading = true
      selectProduceRegistrationList(query).then(resp => {
        if (resp.success) {
          this.tableData = resp.data
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].attribute = this.tableData[i].productAttribute.map(e => e.value).join(' ')
          }
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    getSysConfigInfo() {
      selectConfig().then(resp => {
        this.sysConfigInfo = resp.data
      })
    }
  }
}
</script>

<style scoped>
td, th {
  border: 1px solid #000; /* 设置单条线的边框样式 */
}
tr {
  page-break-inside: avoid;
}
</style>
